<template>
	<common-page>
		<view class="card-wrap">
			<u--form
				labelPosition="left"
				labelWidth="200rpx"
				:model="formData"
				:rules="rules"
				ref="uForm"
			>
				<u-form-item
					label="密码"
					prop="oldPassword"
					borderBottom
					required
				>
					<u--input
						v-model="formData.oldPassword"
						:password="true"
						border="none"
						placeholder="请填写密码"
						placeholderClass="inputPlaceholder"
					></u--input>
				</u-form-item>
				<u-form-item
					label="新密码"
					prop="newPassword"
					borderBottom
					required
				>
					<u--input
						v-model="formData.newPassword"
						:password="true"
						border="none"
						placeholder="请填写新密码"
						placeholderClass="inputPlaceholder"
					></u--input>
				</u-form-item>
				<u-form-item
					label="确认新密码"
					prop="confirmPassword"
					borderBottom
					required
				>
					<u--input
						v-model="formData.confirmPassword"
						:password="true"
						border="none"
						placeholder="请填写确认新密码"
						placeholderClass="inputPlaceholder"
					></u--input>
				</u-form-item>
			</u--form>
		</view>
		<u-button text="保存" type="primary" color="#417CE9" @click="bindSubmit"></u-button>
	</common-page>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				oldPassword: '',
				newPassword: '',
				confirmPassword: ''
			},
			rules: {
				'oldPassword': {
					type: 'string',
					required: true,
					message: '请填写密码',
					trigger: ['blur', 'change']
				},
				'newPassword': {
					type: 'string',
					required: true,
					message: '请填写新密码',
					trigger: ['blur', 'change']
				},
				'confirmPassword': [{
					type: 'string',
					required: true,
					message: '请再次填写新密码',
					trigger: ['blur', 'change']
				}, {
					validator: (rule, value, callback) => {
						if (value) {
							if (value == this.formData.newPassword) {
								callback();
							} else {
								callback('两次密码不一样');
							}
						} else {
							callback();
						}
					},
					trigger: ['blur']
				}]
			}
		};
	},
	onReady() {
		// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad() {

	},
	methods: {
		bindSubmit() {
			this.$refs.uForm.validate().then(async(res) => {
				const [err, result] = await this.$to(uni.$u.http.post('/jeecg-boot/api/v1-public/mini-program-user/updatePasswd', this.formData));
				if (err) return;
				uni.$u.toast('修改成功');
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}).catch(errors => {
				uni.$u.toast('校验失败');
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.card-wrap {
	padding: 20rpx 40rpx;
	background-color: #fff;
	margin-top: 32rpx;
	border-radius: 20rpx;
}

::v-deep .u-button {
	margin-top: 60rpx;
	border-radius: 80rpx !important;
	.u-button__text {
		font-size: 32rpx !important;
		font-weight: bold;
	}
}
</style>
